<template>
  <view class="vh-100 d-flex flex-column" style="background-color: #f2f2f2">
    <StatusBar></StatusBar>
    <HeaderComponent title="交易提醒" class="w-100" style="width: 10%"></HeaderComponent>
    <scroll-view scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower"
                 :refresher-enabled="true" class="flex-grow-1 overflow-scroll">
      <view class="bg-light">
        <view v-for="(item,index) in list" :key="index" class="my-2 p-3 bg-white">
          <view class="d-flex justify-content-between flex-grow-1">
            <view
                class="col-8 flex-grow-1 d-flex flex-column justify-content-between border-dark border-2 border-bottom">
              <view class="fw-bold"> {{ item.title }}</view>
              <view class="d-flex justify-between align-items-center">
                <view class="flex-grow-1 fs-6">
                  <view class="text-secondary small" v-show="item.subType">{{ item.subType }}</view>
                  <view class="text-secondary small">阅读: {{ item.readNum }}</view>
                </view>
                <view class="px-2 text-secondary">{{ item.timeDesc }}</view>
              </view>
            </view>
            <view class="ratio ratio-1x1">
              <image :src="item.imgUrl"></image>
            </view>
          </view>
        </view>
        <view v-if="loading" class="text-center p-3">加载中...</view>
      </view>
    </scroll-view>
    <view class="mt-3"></view>
  </view>
</template>

<script>
import HeaderComponent from "../../common/HeaderComponent.vue";
import StatusBar from "../../common/StatusBar.vue";
import {fmtDateY_M_D_H_M_S} from "../../../common/js/util";

export default {
  components: {
    StatusBar,
    HeaderComponent
  },
  data() {
    return {
      list: [], // 存储列表数据
      loading: false, // 加载状态
      page: {
        current: 1,
        pageSize: 10, // 每页加载的数据数量
        data: []
      },
    }
  },
  methods: {
    goto(url) {
      uni.navigateTo({
        url: url,
      });
    },
    async loadData(queryData) {
      if (this.loading) return;
      this.loading = true;
      let res = await this.mockGetdata(queryData);
      await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟等待1秒
      if (res.code === 1) {
        let page = res.data
        if (page?.data?.length > 0) {
          this.page = page;
          this.list = this.list.concat(page.data)
        }
      }
      this.loading = false;
    },
    async mockGetdata(page) {
      let data = []
      let today = new Date(); // 当前日期
      for (let i = 0; i < page.pageSize; i++) {
        let randomInt = Math.floor(Math.random() * 2) + 1;
        let newDate = new Date(today); // 复制当前日期对象，避免直接修改它
        newDate.setDate(newDate.getDate() - i - 1);

        if (randomInt === 1) {
          data.push({
            title: "保证金调整通知",
            createTime: fmtDateY_M_D_H_M_S(newDate),
            timeDesc: `${i + 1}天前`,
            type: 1,
            subType: null,
            readNum: Math.floor(Math.random() * 2000),
            imgUrl: '/static/img/note_margin.jpg',
            href: '',
          })
        } else {
          data.push({
            title: "盘中提醒",
            createTime: fmtDateY_M_D_H_M_S(newDate),
            timeDesc: `${i + 1}天前`,
            type: 2,
            subType: '涨跌幅提醒',
            readNum: Math.floor(Math.random() * 2000),
            imgUrl: '/static/img/note_trading.png',
            href: '',
          })
        }
      }
      page.data = data
      return {
        code: 1,
        data: page
      }
    },
    // 滚动到底部触发
    async onScrollToLower() {
      let params = {
        current: this.page.current + 1,
        pageSize: this.page.pageSize,
        search: this.search,
      }
      await this.loadData(params);
    },
  },
  mounted() {
    // 页面加载时初次获取数据
    this.loadData(this.page);
  },
};
</script>
<style scoped>
</style>
